<template>
   <s-upload
         @onSuccess="onSucessUpload"
         accept=".WVUpgrade"
         style="position: relative; display: inline-block"
         :class="[{ m_bottom: state.file }]"
      >
         <s-button style="margin-right:16px">浏览</s-button>
         <span v-if="state.file" class="file_position">
            <s-icon type="icon-file" /> {{ state.file.name }}
         </span>
      </s-upload>
      <s-button type="primary" @click="handleUpgrade">升级</s-button>
   <s-modal
      v-model:show="loadShow"
      :title="tip"
      :before-close="closeLoad"
      :show-close="showClose"
   >
      <s-progress :type="progressType" :val="progressType==='step'?loadVal:50" :show-text="progressType==='step'"/>
   </s-modal>
</template>

<script lang="ts" setup>
import { SCard, SUpload, Message, SButton, SIcon, SModal, SProgress } from "@/components"
import { reactive, toRaw } from "vue"
import { useLoad } from "@/hooks"
import { upgrade, getProgressBarVal } from "@/request"
const {
   STATUS,
   tip,
   loadShow,
   closeLoad,
   loadVal,
   changeStatus,
   goReboot,
   showClose,
   progressType,
   changeLoadVal
} = useLoad()
interface State {
   file: any;
}
const state = reactive<State>({
   file: null
})

// 获取文件
const onSucessUpload = (fileList: FileList) => {
   state.file = fileList[0]
}

// 升级文件-上传文件
const handleUpgrade = () => {
   if (!state.file) {
      return Message.error("请先点击浏览导入文件")
   }
   const fb = new FormData()
   fb.append(state.file.name, toRaw(state.file))
   changeStatus(STATUS.UPDATE_UPLOADING)
   upgrade(fb)
   getProgress()
}

// 获取进度
const getProgress = () => {
   let timer: any = null
   timer = setInterval(() => {
      getProgressBarVal()
         .then((data) => {
            if (data) {
               // 文件正确
               if (data.status === 0) {
                  if (data.barval === 100 && data.upgradebarval === 100) {
                     changeLoadVal(100)
                     changeStatus(STATUS.UPDATE_REBOOTING)
                     Message.success("升级成功,请等待重启...")
                     clearInterval(timer)
                     goReboot()
                  } else {
                     if (data.barval < 100) {
                        changeLoadVal(data.barval)
                     } else {
                        if (data.upgradebarval < 100) {
                           changeStatus(STATUS.UPDATE_START)
                           changeLoadVal(data.upgradebarval)
                        }
                     }
                  }
               } else {
                  changeStatus(STATUS.UPDATE_ERROR)
                  clearInterval(timer)
               }
            } else {
               changeStatus(STATUS.UPDATE_ERROR)
               clearInterval(timer)
            }
         })
         .catch(() => {
            changeStatus(STATUS.UPDATE_ERROR)
            Message.error("请求出错，请稍后再试")
         })
   }, 2000)
}
</script>

<style scoped lang="less">
   .m_bottom {
      margin-bottom: 40px;
   }

   .file_position {
      cursor: default;
      position: absolute;
      width: 620px;
      top: 38px;
      left: 0px;
   }
</style>
